<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@ page import="com.google.appengine.api.users.User"%>
<%@ page import="com.google.appengine.api.users.UserService"%>
<%@ page import="com.google.appengine.api.users.UserServiceFactory"%>
<%@ page import="studystat.*"%>
<%@ page import="java.util.List"%>
<%@ page import="java.util.Map"%>
<%@ page import="java.util.HashMap"%>
<%@ page import="java.lang.Integer"%>

<html>

<head>
<title>Statistieken</title>
<%
	UserService userService = UserServiceFactory.getUserService();
	User user = userService.getCurrentUser();
	
%>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile.structure-1.0rc2.min.css" />
<link rel="stylesheet" href="customThemeJ/themes/StudyStatTheme1.min.css" />
	
<script src="http://code.jquery.com/jquery-1.7.1.js"></script> 
<script src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>

<%if (user != null) { %>
<script type="text/javascript">
	function showOnlyElement(e) {
		hideAll();
		$(e).show("slow");
	}
	
	function hideAll() {
		$("#welcome").hide();
		$("#totstudietijd").hide();
		$("#vaktijd").hide();
		$("#plaatsrating").hide();
	}
	
	// Load the Visualization API and the piechart package.
    google.load('visualization', '1.0', {'packages':['corechart']});
    
    // Set a callback to run when the Google Visualization API is loaded.
    google.setOnLoadCallback(drawChart);
    
    // Callback that creates and populates a data table, 
    // instantiates the pie chart, passes in the data and
    // draws it.
    function drawChart() {
	// Duur vakken student
	    // Create the data table.
	    <% HashMap<Vak,Integer> duurVakkenStudent = Statistiek.getInstance().berekenDuurVakken(StudentManager.getInstance().getStudent(user.getUserId()));
	    // Convert Map to Array
	    String[] duurVakkenStudentkeys = new String[duurVakkenStudent.size()];
	    Integer[] duurVakkenStudentvalues = new Integer[duurVakkenStudent.size()];
	    int duurVakkenStudentindex = 0;
	    for (Map.Entry<Vak, Integer> mapEntry : duurVakkenStudent.entrySet()) {
	    	duurVakkenStudentkeys[duurVakkenStudentindex] = mapEntry.getKey().getNaam();
	    	duurVakkenStudentvalues[duurVakkenStudentindex] = mapEntry.getValue();
	    	duurVakkenStudentindex++;
	    }
	    %> 
	    var duurVakkenStudentSize = <%=duurVakkenStudent.size()%>;
	    var duurVakkenStudentArray = new Array();
	    var bol = false;
	    <%
	    for (int row = 0; row < duurVakkenStudent.size(); row++) {%>
	    	duurVakkenStudentArray[<%=row%>] = new Array(2);
	    	duurVakkenStudentArray[<%=row%>][0] = "<%=duurVakkenStudentkeys[row]%>";
	    	duurVakkenStudentArray[<%=row%>][1] = <%=duurVakkenStudentvalues[row]%>;
	    	if(duurVakkenStudentArray[<%=row%>][1] != 0){
	    		bol=true;
	    	}
	    <%}%>
	    
	    if(bol){
	    var duurVakkenStudentData = new google.visualization.DataTable();
	    duurVakkenStudentData.addColumn('string', 'Vak');
	    duurVakkenStudentData.addColumn('number', 'Tijd');
	    duurVakkenStudentData.addRows(duurVakkenStudentSize);
	    for(var i = 0; i < duurVakkenStudentSize; i++) {
	    	duurVakkenStudentData.setCell(i, 0, duurVakkenStudentArray[i][0]);
	    	duurVakkenStudentData.setCell(i, 1, duurVakkenStudentArray[i][1]);
	    }
	
	    // Set chart options
	    var duurVakkenStudentOptions = {'title':'Jouw statistieken (in minuten)',
	    				'is3D':true,
	    		  		'legend':'left',
	    		  		'backgroundColor':'transparent',
	    		  		'width':'500',
	    		  		'height':'300'
	                   };
	
	    // Instantiate and draw our chart, passing in some options.
	    var duurVakkenStudentChart = new google.visualization.PieChart(document.getElementById('duurVakkenStudentDiv'));
	    duurVakkenStudentChart.draw(duurVakkenStudentData, duurVakkenStudentOptions);
	    }
	    else {
	    	document.getElementById('duurVakkenStudentDiv').innerHTML = "<p> Om uw eigen statistieken te bekijken, gelieve eerst te studeren. <\/p>";
	    }
	
	 // Duur vakken iedereen
	    // Create the data table.
	    <% HashMap<Vak,Integer> duurVakkenAll = Statistiek.getInstance().berekenGemiddeldePercentagesVakken(StudentManager.getInstance().getStudent(user.getUserId()));
	    // Convert Map to Array
	    String[] duurVakkenAllkeys = new String[duurVakkenAll.size()];
	    Integer[] duurVakkenAllvalues = new Integer[duurVakkenAll.size()];
	    int duurVakkenAllindex = 0;
	    for (Map.Entry<Vak, Integer> mapEntry : duurVakkenAll.entrySet()) {
	    	duurVakkenAllkeys[duurVakkenAllindex] = mapEntry.getKey().getNaam();
	    	duurVakkenAllvalues[duurVakkenAllindex] = mapEntry.getValue();
	    	duurVakkenAllindex++;
	    }
	    %> 
	    var duurVakkenAllSize = parseInt(<%=duurVakkenAll.size()%>);
	    var duurVakkenAllArray = new Array();
	    <%
	    for (int row = 0; row < duurVakkenAll.size(); row++) {%>
	    	duurVakkenAllArray[<%=row%>] = new Array();
	    	duurVakkenAllArray[<%=row%>][0] = "<%=duurVakkenAllkeys[row]%>";
	    	duurVakkenAllArray[<%=row%>][1] = parseInt(<%=duurVakkenAllvalues[row]%>);
	    <%}%>
	    var duurVakkenAllData = new google.visualization.DataTable();
	    duurVakkenAllData.addColumn('string', 'Vak');
	    duurVakkenAllData.addColumn('number', 'Tijd');
	    duurVakkenAllData.addRows(duurVakkenAllSize);
	    for(var i = 0; i < duurVakkenAllSize; i++) {
	    	duurVakkenAllData.setCell(i, 0, duurVakkenAllArray[i][0]);
	    	duurVakkenAllData.setCell(i, 1, duurVakkenAllArray[i][1]);   	
	    }
	
	    // Set chart options
	    var duurVakkenAllOptions = {'title':'Gemiddelde percentage van iedereen',
	    				'is3D':true,
	    		  		'legend':'right',
	    		  		'backgroundColor':'transparent',
	    		  		'tooltip.text':'value',
	    		  		'width':'500',
	    		  		'height':'300'
	                   };
	
	    // Instantiate and draw our chart, passing in some options.
	    var duurVakkenAllChart = new google.visualization.PieChart(document.getElementById('duurVakkenAllDiv'));
	    duurVakkenAllChart.draw(duurVakkenAllData, duurVakkenAllOptions);
    
	 // Duur totaal
	    // Create the data table.
	    <% Integer duurTotaalStudent = Statistiek.getInstance().berekenTotaleStudietijd(StudentManager.getInstance().getStudent(user.getUserId()));
	 		Integer duurGemAll = Statistiek.getInstance().berekenGemiddeldeStudietijdAlleStudenten();
	    %>
	    var duurTotaalData = new google.visualization.DataTable();
	    duurTotaalData.addColumn('string', 'Vak');
	    duurTotaalData.addColumn('number', 'Student');
	    duurTotaalData.addColumn('number', 'Gemiddelde iedereen');
	    var duurTotaalSize = duurVakkenStudentSize + 1;
	    duurTotaalData.addRows(duurTotaalSize);
	    
	    duurTotaalData.setCell(0,0,"Totaal");
	    duurTotaalData.setCell(0,1, <%=duurTotaalStudent%>);
	    duurTotaalData.setCell(0,2, <%=duurGemAll%>);
	    <% for(int counter = 1; counter < duurVakkenStudent.size()+1; counter++) { %>
	    	duurTotaalData.setCell(<%= counter %>, 0, duurVakkenStudentArray[<%= counter-1 %>][0]);
	    	duurTotaalData.setCell(<%= counter %>, 1, duurVakkenStudentArray[<%= counter-1 %>][1]);
	    	duurTotaalData.setCell(<%= counter %>, 2, 0);
	    <%}%>
	
	    // Set chart options
	    var duurTotaalOptions = {'title':'Totale tijd gestudeerd (in minuten)',
	    		  		'legend':'top',
	    		  		'backgroundColor':'transparent',
	    		  		'width':'750',
	    		  		'height':'450'
	                   };
	
	    // Instantiate and draw our chart, passing in some options.
	    var duurTotaalChart = new google.visualization.BarChart(document.getElementById('duurTotaalDiv'));
	    duurTotaalChart.draw(duurTotaalData, duurTotaalOptions);
	 
	 // Rating per plaats
	    // Create the data table.
	    <% HashMap<String,Integer> ratingPerPlaats = Statistiek.getInstance().berekenGemiddeldRatingPlaats();
	    // Convert Map to Array
	    String[] ratingPerPlaatskeys = new String[ratingPerPlaats.size()];
	    Integer[] ratingPerPlaatsvalues = new Integer[ratingPerPlaats.size()];
	    int ratingPerPlaatsindex = 0;
	    for (Map.Entry<String, Integer> mapEntry : ratingPerPlaats.entrySet()) {
	    	ratingPerPlaatskeys[ratingPerPlaatsindex] = mapEntry.getKey();
	    	ratingPerPlaatsvalues[ratingPerPlaatsindex] = mapEntry.getValue();
	    	ratingPerPlaatsindex++;
	    }
	    %> 
	    var ratingPerPlaatsSize = <%=ratingPerPlaats.size()%>;
	    var ratingPerPlaatsArray = new Array();
	    <%
	    for (int row = 0; row < ratingPerPlaats.size(); row++) {%>
	    	ratingPerPlaatsArray[<%=row%>] = new Array(2);
	    	ratingPerPlaatsArray[<%=row%>][0] = "<%=ratingPerPlaatskeys[row]%>";
	    	ratingPerPlaatsArray[<%=row%>][1] = <%=ratingPerPlaatsvalues[row]%>;
	    <%}%>
	    var ratingPerPlaatsData = new google.visualization.DataTable();
	    ratingPerPlaatsData.addColumn('string', 'Plaats');
	    ratingPerPlaatsData.addColumn('number', 'Rating');
	    ratingPerPlaatsData.addRows(ratingPerPlaatsSize);
	    for(var i = 0; i < ratingPerPlaatsSize; i++) {
	    	ratingPerPlaatsData.setCell(i, 0, ratingPerPlaatsArray[i][0]);
	    	ratingPerPlaatsData.setCell(i, 1, ratingPerPlaatsArray[i][1]);
	    }
	
	    // Set chart options
	    var ratingPerPlaatsOptions = {'title':'Gemiddelde ratings per plaats',
	    		  		'legend':'top',
	    		  		'backgroundColor':'transparent',
	    		  		'vAxis':{"maxValue":'5'},
					    'width':'750',
 				 		'height':'450'
	    				};
	
	    // Instantiate and draw our chart, passing in some options.
	    var ratingPerPlaatsChart = new google.visualization.ColumnChart(document.getElementById('ratingPerPlaatsDiv'));
	    ratingPerPlaatsChart.draw(ratingPerPlaatsData, ratingPerPlaatsOptions);
    	}
    
	$(document).ready(function() {
		showOnlyElement("#welcome");
		
	});

	
</script>

<%
	}
%>
</head>

<body>
	<div data-role="page" data-theme="b">

		<!-- Titelbalk -->
		<div data-role="header" data-position="inline" data-theme="b">
		<a href="achievement.jsp" data-icon="star" class="ui-btn-left" rel="external">Achievements</a>
			<h1>The Real Study Stat</h1>
			<a href="option.jsp" data-icon="gear" class="ui-btn-right"
				rel="external">Options</a>
			<div data-role="navbar">
				<ul>
					<li><a href="main.jsp" rel="external">Home</a></li>
					<li><a href="" rel="external">Statistieken</a></li>
					<li><a href="contact.html" rel="external">Contact</a></li>
					<li><a href="about.html" rel="external">Over Ons</a></li>
					<li><a href="<%= userService.createLogoutURL("/login") %>" rel="external">Uitloggen</a></li>
				</ul>
			</div>
		</div>

		<div data-role="content">
			<%
				if (user != null) {
			%>
			<div class="ui-grid-b">
				<div class="ui-block-a" data-role="controlgroup" id="keuzemenu" style="width: 15%">
					<a onclick="showOnlyElement('#totstudietijd')" data-role="button">Totale
								studietijd</a>
						<a onclick="showOnlyElement('#vaktijd')" data-role="button">Tijd per vak</a>
						<a onclick="showOnlyElement('#plaatsrating')" data-role="button">Rating
								per plaats</a>
				</div>
				
				<div class="ui-block-b" style="width:5%"></div>
				
				<div class="ui-block-c" id="content" style="width: 80%">
					<div id="welcome">
						<h1>Bekijk hier de statistieken van je prestaties.</h1>
						<p>
							Klik links op een link om de overeenkomstige statistiek te tonen.
						</p>
					</div>
					<div id="totstudietijd">
						<h2>Vergelijk je totale studietijd met die van anderen</h2>
						<div id="duurTotaalDiv"></div>						
					</div>
					
					<div id="vaktijd">
						<h2>Vergelijk de tijd die je per vak studeert met anderen</h2>
						<div id="duurVakkenStudentDiv" style="float:left"></div>
						<div id="duurVakkenAllDiv" style="float:left"></div>	
					</div>
					
					<div id="plaatsrating">
						<h2>Bekijk de gemiddelde ratings van de verschillende studieplaatsen door alle studenten.</h2>
						<div id="ratingPerPlaatsDiv"></div>
					</div>
				</div>
			</div>
			<%
				} else {
			%>
			<div id="content">
				<p>
					<a href="<%=userService.createLoginURL(request.getRequestURI())%>">Log
						in om verder te gaan</a>
				</p>
			</div>
			<%
				}
			%>

		</div>
		<!-- content end -->
	</div>
	<!-- page end -->
</body>
</html>
